<template>
  <div class="partition-list">
    <head-title title="库存--分区列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right">
          <refresh-button @refresh="init"></refresh-button>
          <div class="add">
            <el-button type="primary" @click="addPartition('add', 0)"
              >添加分区</el-button
            >
          </div>
        </div>
      </div>
      <p style="height: 30px"></p>
      <el-table :data="list" border>
        <el-table-column
          label="序号"
          align="center"
          prop="region_id"
          width="100"
        ></el-table-column>
        <el-table-column label="分区名称" align="center">
          <template slot-scope="scope">
            <span v-html="scope.row.spl"></span>
            <span v-html="scope.row.region_name"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
        ></el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="addPartition('add', scope.row.region_id)"
              >新增</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="addPartition('eidt', scope.row.region_id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="onDel(scope.row.region_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑分区弹框 -->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="partitionDialog"
      center
      :modal-append-to-body="false"
      width="500px"
      @close="onClose"
    >
      <el-form
        :model="partitionForm"
        :rules="partitionFormRules"
        ref="partitionForm"
        label-width="100px"
      >
        <div class="menu-dialog">
          <el-form-item label="分区名称:" prop="region_name"
            ><el-input
              v-model="partitionForm.region_name"
              placeholder="请输入分区名称"
            ></el-input
          ></el-form-item>
          <el-form-item label="备注:" prop="remark"
            ><el-input
              v-model="partitionForm.remark"
              placeholder="请输入备注"
            ></el-input
          ></el-form-item>
          <el-form-item label="隶属分区:" prop="parent_id">
            <el-select v-model="partitionForm.parent_id" placeholder="请选择">
              <el-option
                v-for="item in regionList"
                :key="item.region_id"
                :value="item.region_id"
                :label="item.region_name"
              >
                <span v-html="item.spl"></span>
                <span v-html="item.region_name"></span
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose"> 取 消 </el-button>
        <el-button type="primary" @click="confirmClick('partitionForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      title: "添加分区",
      type: "add",
      partitionDialog: false,
      partitionForm: {
        region_name: "",
        parent_id: 0,
        remark: "",
      },
      partitionFormRules: {
        region_name: [{ required: true, message: "请输入分区名称" }],
      },
      regionList: [],
      region_id: 0,
    };
  },
  created() {
    this.init();
    this.$http(this.$ApiList.AddSelectRegionList).then((res) => {
      this.regionList = res.datas;
      this.regionList.unshift({
        region_id:0,
        region_name:'无',
        parent_id:'',
        spl:''
      })
    });
  },
  methods: {
    init() {
      this.$http(this.$ApiList.RegionList).then((res) => {
        const { datas } = res;
        this.list = datas;
      });
    },
    addPartition(type, parent_id) {
      this.type = type;
      if (type === "add") {
        this.title = "添加分区";
        this.partitionForm.parent_id = parent_id;
        this.$delete(this.partitionForm, "region_id");
        this.partitionDialog = true;
      } else if (type === "eidt") {
        this.title = "编辑分区";
        this.$http(this.$ApiList.RegionInfo, { region_id: parent_id }).then(
          (res) => {
            this.partitionForm = res.datas;
            this.partitionDialog = true;
          }
        );
      }
    },
    confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.type === "add") {
            this.$http(this.$ApiList.RegionAdd, this.partitionForm).then(
              (res) => {
                this.$message.success(res.datas);
                this.init();
                this.partitionDialog = false;
              }
            );
          } else {
            if (this.region_id !== 0) {
              this.partitionForm.parent_id = this.region_id;
            }
            this.$http(this.$ApiList.RegionEdit, this.partitionForm).then(
              (res) => {
                this.$message.success(res.datas);
                this.init();
                this.partitionDialog = false;
              }
            );
          }
        }
      });
    },
    onClose() {
      this.partitionDialog = false;
      this.$refs["partitionForm"].resetFields();
    },
    onDel(region_id) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http(this.$ApiList.DelRegion, { region_id }).then((res) => {
          this.$message.success(res.datas);
          this.init();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.partition-list {
  .el-select {
    width: 100%;
  }
}
</style>